<LayoutBaseBox>
    <template slot="main">
        <LayoutEditFormBox :loading="!load">
            <template slot="main">

                <el-form ref="editForm" :model="form" label-width="200px" label-position="left">

                    <LayoutCell>
                        <LayoutCellItem title="图片设置">
                            <el-form-item label="支持图片大小(KB)" prop="imgSize"
                                :rules="{ required: true, message: '支持图片大小 不能为空'}">
                                <el-input-number style="width:200px" v-model="form.imgSize" controls-position="right"
                                    :min="10" :max="1024*100"></el-input-number>
                                <span class="s1" v-if="form.imgSize">约为
                                    {{parseFloat(form.imgSize / 1024).toFixed(2) + "MB"}}</span>
                                <span class="s1">(1024KB = 1MB)</span>
                                <span
                                    class="s1">（微信图片资源最大支持<strong>10M</strong>，支持<strong>PNG\JPEG\JPG\GIF</strong>格式）</span>

                            </el-form-item>
                            <el-form-item label="支持图片后缀" prop="imgSuffixLst"
                                :rules="{ required: true, message: '支持视频后缀 至少一个'}">
                                <div>
                                    <el-input placeholder="请输入新增图片后缀名" style="width:200px;margin-right:10px;"
                                        v-model="imgSuffixValue"></el-input>
                                    <el-button @click="addImg()">确定</el-button>
                                </div>
                                <div class="tagList">
                                    <el-tag class="tagStyle pointer" v-for="(item,index) in form.imgSuffixLst" closable
                                        :key="index" @close="delImg(index)">{{item}}</el-tag>
                                </div>
                            </el-form-item>
                        </LayoutCellItem>

                        <LayoutCellItem title="视频设置">
                            <el-form-item label="支持视频大小(KB)" prop="videoSize"
                                :rules="{ required: true, message: '支持视频大小 不能为空'}">
                                <el-input-number style="width:200px" v-model="form.videoSize" controls-position="right"
                                    @change="handleChange" :min="100" :max="1024*1024">
                                </el-input-number>
                                <span class="s1" v-if="form.videoSize">约为
                                    {{parseFloat(form.videoSize / 1024).toFixed(2) + "MB"}}</span>
                                <span class="s1">(1024KB = 1MB)</span>
                                <span class="s1">（微信视频资源最大支持<strong>10M</strong>，支持<strong>MP4</strong>格式）</span>

                            </el-form-item>
                            <el-form-item label="支持视频后缀" prop="videoSuffixLst"
                                :rules="{ required: true, message: '支持视频后缀 至少一个'}">
                                <div>
                                    <el-input placeholder="请输入新增视频后缀名" style="width:200px;margin-right:10px;"
                                        v-model="videoSuffixValue"></el-input>
                                    <el-button @click="addVideo()">确定</el-button>
                                </div>
                                <div class="tagList">
                                    <el-tag class="tagStyle pointer" v-for="(item,index) in form.videoSuffixLst"
                                        :key="index" closable @close="delVideo(index)">{{item}}</el-tag>
                                </div>
                            </el-form-item>
                        </LayoutCellItem>

                        <LayoutCellItem title="音频设置">
                            <el-form-item label="支持音频大小(KB)" prop="voiceSize"
                                :rules="{ required: true, message: '支持音频大小 不能为空'}">
                                <el-input-number style="width:200px" v-model="form.voiceSize" controls-position="right"
                                    @change="handleChange" :min="100" :max="1024*1024">
                                </el-input-number>
                                <span class="s1" v-if="form.voiceSize">约为
                                    {{parseFloat(form.voiceSize / 1024).toFixed(2) + "MB"}}</span>
                                <span class="s1">(1024KB = 1MB)</span>
                                <span
                                    class="s1">（微信音频资源最大支持<strong>2M</strong>，播放长度不超过<strong>60s</strong>，支持<strong>AMR\MP3</strong>格式）</span>

                            </el-form-item>
                            <el-form-item label="支持音频后缀" prop="voiceSuffixLst"
                                :rules="{ required: true, message: '支持音频后缀 至少一个'}">
                                <div>
                                    <el-input placeholder="请输入新增音频后缀名" style="width:200px;margin-right:10px;"
                                        v-model="voiceSuffixValue"></el-input>
                                    <el-button @click="addVoice()">确定</el-button>
                                </div>
                                <div class="tagList">
                                    <el-tag class="tagStyle pointer" v-for="(item,index) in form.voiceSuffixLst"
                                        :key="index" closable @close="delVoice(index)">{{item}}</el-tag>
                                </div>
                            </el-form-item>
                        </LayoutCellItem>
                    </LayoutCell>


                </el-form>
            </template>
            <template slot="footer">
                <el-button type="primary" @click="submit()">确定</el-button>
            </template>
        </LayoutEditFormBox>


    </template>
</LayoutBaseBox>